<!-- Button section -->
<div class="col-md-12" style="margin-top:1%">
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="icon-beer icon-large"></i> Hierapolis Rocks!
            <div class="panel-tools">
                <div class="btn-group">
                    <a class="btn" ng-href="/#!/manager/dashboard">
                        <i class="icon-refresh"></i> Refresh statics
                    </a>
                    <a class="btn" data-toggle="toolbar-tooltip" href="#" title="Toggle">
                        <i class="icon-chevron-down"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- Buttons -->
        <ul ng-model="vm.merchant_count" class="nav nav-pills">

            <!-- Comment button with number of latest comments count -->
            <li class="dropdown dropdown-big">
                <a class="dropdown-toggle" ng-href="/#!/manager/audit" data-toggle="dropdown">
                    <i class="icon-comments"></i> &nbsp;Wait Audit&nbsp; <span class="label label-primary">{{vm.merchant_count.audit}}</span>
                </a>
            </li>

            <!-- Message button with number of latest messages count-->
            <li class="dropdown dropdown-big">
                <a class="dropdown-toggle" ng-href="/#!/manager/bwControl/white_list" data-toggle="dropdown">
                    <i class="icon-envelope-alt"></i>&nbsp;&nbsp;&nbsp; White&nbsp;&nbsp;&nbsp; <span class="label label-success">{{vm.merchant_count.white}}</span>
                </a>
            </li>

            <!-- Members button with number of latest members count -->
            <li class="dropdown dropdown-big">
                <a class="dropdown-toggle" ng-href="/#!/manager/bwControl/black_list" data-toggle="dropdown">
                    <i class="icon-user"></i> &nbsp;&nbsp;&nbsp;Black&nbsp;&nbsp;&nbsp; <span class="label label-warning">{{vm.merchant_count.black}}</span>
                </a>
            </li>
            <li class="dropdown dropdown-big">
                <a class="dropdown-toggle" ng-href="/#!/manager/audit" data-toggle="dropdown">
                    <i class="icon-user"></i>&nbsp;&nbsp; Rejected&nbsp;&nbsp; <span class="label label-danger">{{vm.merchant_count.reject}}</span>
                </a>
            </li>
        </ul>
        <div class="panel-body">
            <div class="page-header __web-inspector-hide-shortcut__">
                <h4>Merchant Total number :{{vm.merchant_count.all}}</h4>
            </div>

            <div class="page-header __web-inspector-hide-shortcut__">
                <h4>Percent Bar Chart </h4>
            </div>
            <div class="progress col-md-10">
                <div id="audit_merchant_percent" class="progress-bar progress-bar-primary" style="width: 25%"></div>
                <div id="white_merchant_percent" class="progress-bar progress-bar-success" style="width: 25%"></div>
                <div id="black_merchant_percent" class="progress-bar progress-bar-warning" style="width: 25%"></div>
                <div id="reject_merchant_percent" class="progress-bar progress-bar-danger" style="width: 25%"></div>
            </div>

            <div class="box" style="float:left">
                <div class="page-header __web-inspector-hide-shortcut__">
                    <h4>&nbsp;Percent Pie Chart </h4>
                </div>
                <div class="box-content">
                    <div id="piechart">
                        <div style="position: relative;">
                            <div dir="ltr" style="position: relative; width: 556px; height: 260px;">
                                <div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                                    <svg width="556" height="300" aria-label="A chart." style="overflow: hidden;">
                                    <defs id="defs"></defs>
                                    <rect x="0" y="0" width="556" height="300" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                                    <g>
                                        <text text-anchor="start" x="89" y="29.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Merchant Chart View</text>
                                        <rect x="89" y="19" width="378" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                    </g>
                                    <!--Chart  Span-->
                                    <g>
                                        <rect x="342" y="50" width="125" height="88" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                        <!--Audit Span-->
                                        <g>
                                            <rect x="342" y="50" width="125" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                            <g>
                                                <text text-anchor="start" x="359" y="60.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Audit</text>
                                            </g>
                                            <!-- audit circle -->
                                            <circle  cx="348" cy="56" r="6" stroke="none" stroke-width="0" fill="#337ab7"></circle>
                                        </g>
                                        <!--White Span-->
                                        <g>
                                            <rect x="342" y="69" width="125" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                            <g>
                                                <text text-anchor="start" x="359" y="79.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">White</text>
                                            </g>
                                            <!-- white circle -->
                                            <circle  cx="348" cy="75" r="6" stroke="none" stroke-width="0" fill="#5cb85c"></circle>
                                        </g>
                                        <!--Black Span-->
                                        <g>
                                            <rect x="342" y="88" width="125" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                            <g>
                                                <text text-anchor="start" x="359" y="98.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Black</text>
                                            </g>
                                            <!-- black circle -->
                                            <circle  cx="348" cy="94" r="6" stroke="none" stroke-width="0" fill="#f0ad4e"></circle>
                                        </g>
                                        <!--Reject Span-->
                                        <g>
                                            <rect x="342" y="107" width="125" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                            <g>
                                                <text text-anchor="start" x="359" y="117.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Reject</text>
                                            </g>
                                            <!-- reject circle -->
                                            <circle  cx="348" cy="113" r="6" stroke="none" stroke-width="0" fill="#d9534f"></circle>
                                        </g>
                                        <!--Author Span-->
                                       <!--<g>
                                            <rect x="342" y="126" width="125" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
                                            <g>
                                                <text text-anchor="start" x="359" y="136.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Sleep</text>
                                            </g>
                                            <circle  cx="348" cy="132" r="6" stroke="none" stroke-width="0" fill="#444"></circle>
                                       </g>-->
                                </g>
                                <g>
                                    <path  id="audit_circle_chart" d="M206,131      L206,51     A80,80,0,0,1,   286,131      L206,131        A0,0,0,0,0,206,131" stroke="#ffffff" stroke-width="1" fill="#337ab7"></path>
                                </g>
                                <g>
                                    <path id="white_circle_chart" d="M206,131       L126,131    A80,80,0,0,1,   206,51       L206,131        A0,0,0,0,0,206,131" stroke="#ffffff" stroke-width="1" fill="#5cb85c"></path>
                                </g>
                                <g>
                                    <path id="black_circle_chart" d="M206,131       L206,211    A80,80,0,0,1,   126,131      L206,131        A0,0,0,0,0,206,131" stroke="#ffffff" stroke-width="1" fill="#f0ad4e"></path>
                                </g>
                                <g>
                                    <path id="reject_circle_chart" d="M206,131      L286,131     A80,80,0,0,1,   206,211      L206,131        A0,0,0,0,0,206,131" stroke="#ffffff" stroke-width="1" fill="#d9534f"></path>
                                </g>
                                <!--<g>
                                    <path d="M206,131L226.70552360820164,208.27406610312545A80,80,0,0,1,185.29447639179833,208.27406610312545L206,131A0,0,0,0,0,206,131" stroke="#ffffff" stroke-width="1" fill="#444"></path>
                                </g>-->
                               
                                
                        </svg>





                                    <div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Merchant</th>
                                                    <th>Number Count</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Audit</td>
                                                    <td>0</td>
                                                </tr>
                                                <tr>
                                                    <td>White</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Black</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Reject</td>
                                                    <td>2</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div aria-hidden="true" style="display: none; position: absolute; top: 270px; left: 566px; white-space: nowrap; font-family: Arial; font-size: 12px;">Eat</div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box" style="float:left">
                <div class="page-header __web-inspector-hide-shortcut__">
                    <h4>&nbsp;Number Bar Graph </h4>
                </div>
                <div class="blockoff-left">
                    <div id="barchart">
                        <div style="position: relative;">
                            <div dir="ltr" style="position: relative; width: 567px; height: 300px;">
                                <div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                                    <svg width="567" height="300" aria-label="A chart." style="overflow: hidden;">
                                    <defs id="defs">
                                        <clipPath id="_ABSTRACT_RENDERER_ID_0">
                                            <rect x="98" y="58" width="371" height="185">
                                                </rect>
                                                </clipPath>
                                                </defs>
                                                <rect x="0" y="0" width="567" height="300" stroke="none" stroke-width="0" fill="#ffffff">
                                                    </rect>
                                                    <g>
                                                        <text text-anchor="start" x="98" y="37.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Merchant Bar View</text>
                                                        <rect x="98" y="27" width="371" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
                                                        </rect>
                                                    </g>
                                                    <g>
                                                        <rect x="481" y="58" width="74" height="28" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
                                                        </rect>
                                                        <g>
                                                            <rect x="481" y="58" width="24" height="12" stroke="none" stroke-width="0" fill="#337ab7">
                                                            </rect>
                                                            <g>
                                                                <text text-anchor="start" x="510" y="68.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Audit </text>
                                                            </g>
                                                            <rect x="481" y="78" width="24" height="12" stroke="none" stroke-width="0" fill="#5cb85c">
                                                            </rect>
                                                            <g>
                                                                <text text-anchor="start" x="510" y="88.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">White </text>
                                                            </g>
                                                            <rect x="481" y="98" width="24" height="12" stroke="none" stroke-width="0" fill="#f0ad4e">
                                                            </rect>
                                                            <g>
                                                                <text text-anchor="start" x="510" y="108.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Black </text>
                                                            </g>
                                                            <rect x="481" y="118" width="24" height="12" stroke="none" stroke-width="0" fill="#d9534f">
                                                            </rect>
                                                            <g>
                                                                <text text-anchor="start" x="510" y="128.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Rejected </text>
                                                            </g>
                                                            
                                                            
                                                        </g>
                                                    </g>
                                                    <g>
                                                        <rect x="98" y="58" width="371" height="185" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
                                                        </rect>
                                                        <g clip-path="url(http://keaplogik.github.io/Bootstrap-Clean-Dashboard-Theme/demo/demo-horizontal-fixed-nav.html#_ABSTRACT_RENDERER_ID_0)">
                                                            <g>
                                                                 <rect x="98" y="242" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
                                                                 </rect>
                                                                 <rect x="98" y="196" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
                                                                </rect>
                                                                <rect x="98" y="150" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
                                                                </rect>
                                                                <rect x="98" y="104" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
                                                                </rect>
                                                                <rect x="98" y="58" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
                                                                </rect>
                                                            </g>
                                                            <g>
                                                                <rect id="audit_merchant_bar_chart" x="113" y="243" width="45" height="0" stroke="none" stroke-width="0" fill="#337ab7">
                                                                </rect>
                                                                <rect id="white_merchant_bar_chart" x="187" y="243" width="45" height="0" stroke="none" stroke-width="0" fill="#5cb85c">
                                                                </rect>
                                                                <rect id="black_merchant_bar_chart" x="261" y="243" width="45" height="0" stroke="none" stroke-width="0" fill="#f0ad4e">
                                                                </rect>
                                                                <rect id="reject_merchant_bar_chart" x="335" y="243" width="45" height="0" stroke="none" stroke-width="0" fill="#d9534f">
                                                                </rect>
                                                            </g>
                                                            <g>
                                                                <rect x="98" y="242" width="371" height="1" stroke="none" stroke-width="0" fill="#333333">
                                                                </rect>
                                                            </g>
                                                        </g>
                                                    <g>
                                                </g>
                                                <g>
                                                    <g>
                                                        <text text-anchor="middle" x="135.5" y="260.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Audit</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="middle" x="209.5" y="260.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">White</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="middle" x="283.5" y="260.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Black</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="middle" x="357.5" y="260.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Reject</text>
                                                    </g>
                                                   
                                                    <g>
                                                        <text text-anchor="end" x="86" y="246.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="end" x="86" y="200.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">5</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="end" x="86" y="154.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">10</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="end" x="86" y="108.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">15</text>
                                                    </g>
                                                    <g>
                                                        <text text-anchor="end" x="86" y="62.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">20</text>
                                                    </g>
                                                </g>
                                            </g>
                                        <g>
                                        </g>
                                </svg>
                                    <div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Audit Merchant</th>
                                                </tr>
                                                <tr>
                                                    <th>White Merchant</th>
                                                </tr>
                                                <tr>
                                                    <th>Black Merchant</th>
                                                </tr>
                                                <tr>
                                                    <th>Rejected Merchant</th>
                                                </tr>

                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Work</td>
                                                    <td>11</td>
                                                </tr>
                                                <tr>
                                                    <td>Eat</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Commute</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Watch TV</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Sleep</td>
                                                    <td>7</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div aria-hidden="true" style="display: none; position: absolute; top: 310px; left: 577px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">Commute</div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>